<template>
  <div ref="contaibner">
    <div>
      <el-input v-model="queryParams.searchKey"
                clearable
                class="searchKeyclass"
                size="mini" style="width: 420px;margin-right: 10px;"
                focus
                @keydown.native.prevent.enter="triggerSearch()"
      />
      <el-button type="primary" size="mini"
                 @click="()=>{
       triggerSearch()
      }"
      >搜索
      </el-button>
    </div>
    <el-table :data="dataList" height="520px">
      <el-table-column label="表名称">
        <template slot-scope="scope">
          <span style="padding-right: 10px;">{{ scope.row.tableName }}</span>
          <el-button type="text" @click="()=>triggerkeys(scope.row)">
            查
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="命中理由">
        <template slot-scope="scope">
          <div v-html="scope.row.hitReasons" style="font-size: 12px;"></div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from 'axios';
import { openLayer } from '@/utils/layerdialog/layerdialog';

export default {
  data() {
    return {
      datasourceDto: undefined,
      queryParams: {
        datasourceDto: undefined,
        searchKey: '',
      },
      dataList: [],

    };
  },

  methods: {

    triggerSearch() {
      this.getInfoList();
    },
    async getInfoList() {
      var rsult = await axios.post(`/api/databaseui/gettablebamesbytablenameorproperkeyordesc`, this.queryParams).then(res => res.data);
      var _dataList = rsult && rsult.data || [];
      this.dataList = _dataList;


    },

    async initByDialog(_data) {
      this.datasourceDto = _data?.datasourceDto;
      this.queryParams.datasourceDto = _data?.datasourceDto;


      setTimeout(() => {
        $(this.$refs['contaibner']).find('.searchKeyclass').find('input').focus();
      }, 200);

    },


    async submitByDialog() {
      //validate
      //data operation
      //ajax 提交
      return { success: true };
    },

    async triggerkeys(tableitem) {
      var self = this;
      var result = await openLayer({
        top: '100px',
        width: '555px',
        title: `【${tableitem?.tableName}】表字段`,
        data() {
          return {
            tableName: tableitem?.tableName,
            datasourceDto: self.queryParams.datasourceDto,
          };
        },

        components: {
          modify: () => import('@/views/databaseui/layer/dialogTableKeys.vue'),
        },
      });
    },
  },
};
</script>
